<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-userName="{ searchForm, component }">
      <a-input
        :style="{ width: '240px' }"
        v-model.trim="searchForm[component.dataIndex]"
        allow-clear
        placeholder="请输入用户名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
    <template #operationBeforeExtend="{ record }">
      <a-space>
        <a-link @click="handleDelete(record)">强制退出</a-link>
      </a-space>
    </template>
  </ma-crud>
</template>

<script lang="ts" name="Online" setup>
import { forceLogout, listOnline } from "@/api/monitor/online";
import { SysUserOnline } from "@/api/monitor/online/type";
import { Modal } from "@arco-design/web-vue";
import useLoading from "@/hooks/useLoading";
const { loading, setLoading } = useLoading(true);
const crud = reactive({
  id: "tokenId",
  pk: "tokenId",
  title: "在线查询",
  api: listOnline,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 100,
  pageLayout: "normal",
  rowSelection: { showCheckedAll: true },
  requestParams: { orderBy: "loginTime", orderType: "desc" }
});

const columns = reactive([
  {
    title: "会话编号",
    dataIndex: "tokenId",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "用户名称",
    dataIndex: "userName",
    ellipsis: true,
    search: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录IP",
    dataIndex: "ipaddr",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录地点",
    dataIndex: "loginLocation",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录客户端",
    dataIndex: "deviceType",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "浏览器",
    dataIndex: "browser",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "终端系统",
    dataIndex: "os",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录时间",
    dataIndex: "loginTime",
    ellipsis: true,
    tooltip: true,
    slotName: "loginTime",
    align: "center"
  }
]);

const handleDelete = async (row?: SysUserOnline) => {
  const tokenId = row?.tokenId;
  const desc = row?.userName === undefined ? "当前选中会话编号为 " : " 当前选中用户名称为 ";
  const content = row?.userName === undefined ? tokenId : row?.userName;
  Modal.warning({
    titleAlign: "start",
    alignCenter: false,
    hideCancel: false,
    width: "500",
    title: "提示",
    okLoading: loading.value,
    content: () =>
      h("div", null, [desc, h("span", { style: "color: red;font-weight: 700;font-size: 16px" }, content), " 的数据项?"]),
    onBeforeOk: async () => {
      await forceLogout(tokenId);
      setLoading(false);
    }
  });
};
</script>
